/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js}'],
  darkMode: 'class',
  theme: {
    extend: {
      backdropBlur: {
        '4xl': '240px'
      },
      colors: {
        main: '#f44c58',
        'hover-main': '#f32836',
        'success-100': '#F2F9EC',
        'success-200': '#E4F2DB',
        'success-300': '#7EC050',
        'warn-100': '#FCF6ED',
        'warn-200': '#F8ECDA',
        'warn-300': '#DCA550',
        'error-100': '#ED7456',
        'error-200': '#f3471c',
        'error-300': '#ffffff'
      },
      variants: {
        scrollbar: ['dark']
      }
    },
    spacing: {
      1: '2px',
      2: '4px'
    },
    fontSize: {
      xs: '.12rem',
      sm: '.14rem',
      base: '.16rem',
      lg: '.18rem',
      xl: '.20rem'
    }
  },
  plugins: [require('tailwind-scrollbar')]
}
